<template>
  <div class="task-todos">
    <header-bar title="待办任务"></header-bar>
    <content-scroll>
      <group class="group tasks">
        <cell 
          v-for="(cell, index) in cells" 
          :key="index" 
          is-link 
          :link="cell.link"
          class="cell">
          <div slot="title" class="title-wrapper">
            <div class="icon-wrapper">
              <icon name="document" :scale="2"></icon>
            </div>
            <h3 class="title">
              {{cell.title}}
              <div class="badge" v-if="cell.hasUnread"></div>
            </h3>
          </div>
        </cell>
      </group>
    </content-scroll>
    <transition name="slide">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>
  import HeaderBar from '@/components/HeaderBar'
  import ContentScroll from '@/components/ContentScroll'
  import {Group, Cell, Badge} from 'vux'

  export default {
    components: {
      ContentScroll,
      HeaderBar,
      Group,
      Cell,
      Badge
    },
    data(){
      return {
        cells: [
          {
            title: '出差审批',
            hasUnread: 1,
            link: {
              name: 'bussiness'
            }
          },
          {
            title: '用车审批',
            hasUnread: 0,
            link: {
              name: 'bussiness'
            }
          },
          {
            title: '工作审批',
            hasUnread: 0
          },
          {
            title: '请假审批',
            hasUnread: 0
          },
          {
            title: '接待审批',
            hasUnread: 0
          },
          {
            title: '用章审批',
            hasUnread: 0
          }
        ]
      }
    }
  }
</script>

<style lang="less" scoped>
  .task-todos{
    .title-wrapper{
      display: flex;
      align-items: center;
      .icon-wrapper{
        display: flex;
        align-items: center;
        margin-right: 0.3rem;
      }
      .title{
        position: relative;
        font-weight: 400;
        .badge{
          position: absolute;
          top: 0;
          right: -10px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: red;
        }
      }
    }
  }
  .child-view{
    position: absolute;
    z-index: 500;
    top:0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .slide-enter-active, .slide-leave-active{
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .slide-enter, .slide-leave-active{
    transform: translate3d(100%, 0, 0);
  }
</style>

